<template>
  <div class="detail section">
    <!-- <div class="pager-title">{{$route.meta.title}}</div> -->
    <div class="h2 line">{{title[$route.params.type]}}</div>
    <el-form label-width="120px" style="width: 600px;margin: 30px auto;">
      <el-form-item label="手机号：">
        <el-input style="width: 400px;" readonly :value="formData.user_name" placeholder="注册手机号"></el-input>
      </el-form-item>
      <el-form-item style="margin-bottom: 10px;" label="图形验证码：">
        <el-input style="width: 280px;" placeholder="请输入图形验证码" v-model="formData.captcha"></el-input>
        <img class="code-img" @click="getCapCode()" :src="codeurl" alt="">
      </el-form-item>
      <el-form-item style="margin-bottom: 10px;" label="手机验证码：">
      <el-input style="width: 280px;" placeholder="请输入手机验证码" v-model="formData.code"></el-input>
      <el-button @click="getCode()" :disabled="time > 0" style="width: 110px;margin-left: 10px;" type="primary">{{time ? (time + 's') : '获取验证码'}}</el-button>
    </el-form-item>
      <el-form-item label="新密码：">
        <el-input v-model="formData.password" style="width: 400px;" placeholder="新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：">
        <el-input v-model="formData.confirm_password" style="width: 400px;" placeholder="确认密码"></el-input>
      </el-form-item>
    </el-form>
    <div class="buttons">
      <el-button type="primary" @click="submit()">保存修改</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'detail',
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  data() {
    return {
      title: {
        payment: '支付密码',
        login: '登录密码'
      },
      formData: {
        user_name: '',
        captcha: '',
        code: '',
        password: '',
        confirm_password: ''
      },
      codeurl: '',
      cap_token: '',
      time: 0,
      timer: null
    }
  },
  methods: {
    getCode() {
      this.$http.post('/personal/session/sendsms', {
        phone: this.formData.user_name,
        captcha: this.formData.captcha,
        cap_token: this.cap_token,
        send_type: 1
      }).then(res => {
        if (res.status === 1) {
          this.$message.success('发送成功')
          this.time = res.data.expired || 60
          this.timer = setInterval(() => {
            this.time -= 1
            if (this.time <= 0) {
              clearInterval(this.timer)
              this.timer = null
              this.time = 0
            }
          }, 1000)
        }
      })
    },
    getCapCode() {
      this.$http.get('/personal/session/captcha').then(res => {
        if (res.status === 1) {
          this.cap_token = res.data.token
          this.codeurl = res.data.file
        }
      })
    },
    submit() {
      if (this.$route.params.role === 'personal') {
        this.$http.post('/personal/user/updatepass', {
          username: this.formData.user_name,
          code: this.formData.code,
          password: this.formData.password,
          confirm_password: this.formData.confirm_password
        }).then(res => {
          if (res.status === 1) {
            this.$message.success('修改成功')
            this.$router.go(-1)
          }
        })
      } else if (this.$route.params.role === 'company') {
        this.$http.post('/company/activating', {
          phone: this.formData.user_name,
          code: this.formData.code,
          user_pass: this.formData.password,
          confirm_user_pass: this.formData.confirm_password
        }).then(res => {
          if (res.status === 1) {
            this.$message.success('修改成功')
            this.$router.go(-1)
          }
        })
      }
    }
  },
  mounted() {
    this.getCapCode()
    this.formData.user_name = this.userInfo.info.user_name
  }
}
</script>
<style lang="less" scoped>
.code-img {
  display: inline-block;
  width: 100px;
  height: 40px;
  margin-left: 10px;
  vertical-align: top;
}
</style>